<template>
  <view class="vehicle-list-container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input-wrapper">
        <uni-icons type="search" size="20" color="#999"></uni-icons>
        <input 
          v-model="searchKeyword" 
          placeholder="搜索车牌号、驾驶员" 
          class="search-input"
          @confirm="handleSearch"
        />
      </view>
      <button class="add-btn" @click="addVehicle">
        <uni-icons type="plusempty" size="20" color="#fff"></uni-icons>
        <text>添加车辆</text>
      </button>
    </view>

    <!-- 车辆列表 -->
    <view class="vehicle-list" v-if="vehicleList.length > 0">
      <view 
        v-for="(vehicle, index) in vehicleList" 
        :key="vehicle.vehicleId"
        class="vehicle-item"
        @click="viewDetail(vehicle)"
      >
        <!-- 默认标签 -->
        <view v-if="vehicle.isDefault === '1'" class="default-badge">默认</view>
        
        <view class="vehicle-header">
          <view class="vehicle-plate">
            <uni-icons type="shop" size="24" color="#1890ff"></uni-icons>
            <text class="plate-number">{{ vehicle.vehiclePlate }}</text>
          </view>
          <view :class="['vehicle-status', vehicle.status === '0' ? 'active' : 'inactive']">
            {{ vehicle.status === '0' ? '正常' : '停用' }}
          </view>
        </view>
        
        <view class="vehicle-info">
          <view class="info-row">
            <text class="info-label">车辆类型：</text>
            <text class="info-value">{{ getVehicleTypeName(vehicle.vehicleType) }}</text>
          </view>
          <!-- <view class="info-row">
            <text class="info-label">品牌型号：</text>
            <text class="info-value">{{ vehicle.vehicleBrand || '-' }} {{ vehicle.vehicleModel || '' }}</text>
          </view> -->
          <view class="info-row">
            <text class="info-label">驾驶员：</text>
            <text class="info-value">{{ vehicle.driverName || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">联系电话：</text>
            <text class="info-value">{{ vehicle.driverPhone || '-' }}</text>
          </view>
          <view class="info-row" v-if="vehicle.loadCapacity">
            <text class="info-label">载重量：</text>
            <text class="info-value">{{ vehicle.loadCapacity }}吨</text>
          </view>
        </view>
        
        <view class="vehicle-actions">
          <button 
            class="action-btn default-btn" 
            @click.stop="setDefault(vehicle)"
            v-if="vehicle.isDefault !== '1'"
          >
            设为默认
          </button>
          <button class="action-btn edit-btn" @click.stop="editVehicle(vehicle)">
            编辑
          </button>
          <button class="action-btn delete-btn" @click.stop="deleteVehicle(vehicle)">
            删除
          </button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <image src="/static/images/empty.png" class="empty-image"></image>
      <text class="empty-text">暂无车辆信息</text>
      <button class="empty-btn" @click="addVehicle">添加第一辆车</button>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-wrapper">
      <uni-load-more status="loading"></uni-load-more>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      vehicleList: [],
      searchKeyword: '',
      loading: false,
      vehicleTypes: {
        '0': '货车',
        '1': '面包车',
        '2': '小型车',
        '3': '其他'
      }
    }
  },
  
  onLoad() {
    this.loadVehicleList()
  },
  
  onShow() {
    // 从添加/编辑页面返回时刷新列表
    this.loadVehicleList()
  },
  
  methods: {
    // 加载车辆列表
    async loadVehicleList() {
      try {
        this.loading = true
        const res = await this.$http.get('/system/vehicle/myList')
        if (res.code === 200) {
          this.vehicleList = res.data || []
        }
      } catch (error) {
        console.error('加载车辆列表失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 搜索
    handleSearch() {
      if (!this.searchKeyword) {
        this.loadVehicleList()
        return
      }
      
      // 前端过滤
      const keyword = this.searchKeyword.toLowerCase()
      this.vehicleList = this.vehicleList.filter(item => {
        return item.vehiclePlate.toLowerCase().includes(keyword) ||
               (item.driverName && item.driverName.toLowerCase().includes(keyword))
      })
    },
    
    // 获取车辆类型名称
    getVehicleTypeName(type) {
      return this.vehicleTypes[type] || '未知'
    },
    
    // 添加车辆
    addVehicle() {
      uni.navigateTo({
        url: '/pages/vehicle/add'
      })
    },
    
    // 编辑车辆
    editVehicle(vehicle) {
      uni.navigateTo({
        url: `/pages/vehicle/edit?id=${vehicle.vehicleId}`
      })
    },
    
    // 查看详情
    viewDetail(vehicle) {
      uni.navigateTo({
        url: `/pages/vehicle/detail?id=${vehicle.vehicleId}`
      })
    },
    
    // 设置默认车辆
    async setDefault(vehicle) {
      try {
        uni.showLoading({ title: '设置中...' })
        const res = await this.$http.put(`/system/vehicle/setDefault/${vehicle.vehicleId}`)
        
        if (res.code === 200) {
          uni.showToast({
            title: '设置成功',
            icon: 'success'
          })
          this.loadVehicleList()
        } else {
          uni.showToast({
            title: res.msg || '设置失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('设置默认车辆失败:', error)
        uni.showToast({
          title: '设置失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 删除车辆
    deleteVehicle(vehicle) {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除车辆 ${vehicle.vehiclePlate} 吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({ title: '删除中...' })
              const response = await this.$http.delete(`/system/vehicle/${vehicle.vehicleId}`)
              
              if (response.code === 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                })
                this.loadVehicleList()
              } else {
                uni.showToast({
                  title: response.msg || '删除失败',
                  icon: 'none'
                })
              }
            } catch (error) {
              console.error('删除车辆失败:', error)
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              })
            } finally {
              uni.hideLoading()
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.vehicle-list-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 搜索栏 */
.search-bar {
  background: #fff;
  padding: 20rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 32rpx;
  padding: 0 24rpx;
  height: 64rpx;
}

.search-input {
  flex: 1;
  height: 64rpx;
  font-size: 28rpx;
  margin-left: 16rpx;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: #fff;
  border: none;
  border-radius: 32rpx;
  padding: 0 24rpx;
  height: 64rpx;
  font-size: 28rpx;
}

/* 车辆列表 */
.vehicle-list {
  padding: 20rpx;
}

.vehicle-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  position: relative;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.default-badge {
  position: absolute;
  top: 0;
  right: 40rpx;
  background: #ff4d4f;
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 0 0 8rpx 8rpx;
  font-size: 24rpx;
}

.vehicle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.vehicle-plate {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.plate-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.vehicle-status {
  padding: 8rpx 16rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
}

.vehicle-status.active {
  background: #f6ffed;
  color: #52c41a;
  border: 1rpx solid #b7eb8f;
}

.vehicle-status.inactive {
  background: #fff2e8;
  color: #fa8c16;
  border: 1rpx solid #ffd591;
}

.vehicle-info {
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  margin-bottom: 12rpx;
}

.info-label {
  width: 140rpx;
  font-size: 26rpx;
  color: #999;
}

.info-value {
  flex: 1;
  font-size: 26rpx;
  color: #333;
}

.vehicle-actions {
  display: flex;
  gap: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.action-btn {
  flex: 1;
  height: 60rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  border: 1rpx solid;
  background: #fff;
}

.default-btn {
  color: #1890ff;
  border-color: #1890ff;
}

.edit-btn {
  color: #52c41a;
  border-color: #52c41a;
}

.delete-btn {
  color: #ff4d4f;
  border-color: #ff4d4f;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
}

.empty-image {
  width: 300rpx;
  height: 300rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 30rpx;
  color: #999;
  margin: 30rpx 0;
}

.empty-btn {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: #fff;
  border: none;
  border-radius: 44rpx;
  padding: 0 48rpx;
  height: 88rpx;
  font-size: 30rpx;
  line-height: 88rpx;
}

/* 加载状态 */
.loading-wrapper {
  padding: 40rpx;
  display: flex;
  justify-content: center;
}
</style>